<template>
  <view>
    <view class="cate_tab">
      <view class="cate_tab_title">
        <view class="title_inner"> <uni-segmented-control :current="current" :values="tabName.map((v) => v.title)" @clickItem="onClickItem" styleType="text" activeColor="#d4237a"></uni-segmented-control> </view>
        <view class="iconfont iconsearch"></view>
      </view>
      <scroll-view @scrolltolower="handleScrollLower" enable-flex scroll-y class="content">
        <view class="cate_item" v-for="(item, i) in wallpapers" :key="item.id">
          <go-detail :list="wallpapers" :monthIndex="i"> <image mode="aspectFill" :src="item.thumb"></image> </go-detail></view
      ></scroll-view>
    </view>
  </view>
</template>

<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
import goDetail from "../../components/goTetail.vue";
export default {
  data() {
    return {
      tabName: [{ title: "最新" }, { title: "热门" }],
      current: 0,
      // componentIndex: "home-album",
      id: "",
      params: {
        limit: 20,
        adult: false,
        first: 1,
        order: "hot",
        skip: 0,
      },
      wallpapers: [],
      hasMore: true,
      cate: "",
    };
  },
  onLoad(option) {
    console.log(option);
    this.id = option.id;
    this.cate = option.cate === "pc" ? "/wallpaper" : "/vertical";
    this.getList();
  },
  methods: {
    getList() {
      this.request({
        url: `http://service.picasso.adesk.com/v1${this.cate}/category/${this.id}${this.cate}`,
        data: this.params,
      }).then((res) => {
        console.log(res);
        // if (res.data.res.wallpaper.length < 1) {
        //   this.hasMore = false;
        //   uni.showToast({
        //     title: "没有更多了",
        //     icon: "none",
        //   });
        //   return;
        // }
        if (this.cate === "/wallpaper") {
          this.wallpapers = [...this.wallpapers, ...res.data.res.wallpaper];
        } else {
          this.wallpapers = [...this.wallpapers, ...res.data.res.vertical];
        }
      });
    },
    onClickItem(e) {
      if (this.current === e.currentIndex) return;
      this.current = e.currentIndex;
      this.params.skip = this.current === 0 ? 0 : 20;
      this.wallpapers = [];
      this.getList();
    },
    handleScrollLower() {
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "没有更多了",
          icon: "none",
        });
      }
    },
  },
  components: {
    uniSegmentedControl,
    goDetail,
  },
};
</script>

<style lang="scss" scoped>
.cate_tab_title {
  position: relative;
  .title_inner {
    width: 60%;
    margin: 0 auto;
  }
  .iconsearch {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5%;
  }
}
.content {
  padding: 0 10rpx;
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 36px);
  .cate_item {
    width: 50%;
    // border: 5rpx solod #fff;
    padding: 5rpx;
  }
}
</style>
